<template>
	<div id="app">
		<el-container class="page-user">
			<el-aside width="100px" style="height: 300px;">
				<el-main class="nopadding" style="margin-top: 0px;">
					<el-menu class="menu" :default-active="page" router>
						<el-menu-item v-for="item in menu" :key="item.name" :index="item.component">
							<template #title>
								<span>{{ item.title }}</span>
							</template>
						</el-menu-item>
					</el-menu>
				</el-main>
			</el-aside>
			<el-main style="margin-left: -30px;">
				<div style="height: 100%;">
					<div class="hc col" style="height: 100%; width: 100%">
						<div class="row line1">
							<div class="flex-1 box">
								<Curve1 chartHeight="70" />
							</div>
							<div class="flex-1 box">
								<Curve2 chartHeight="70" />
							</div>
						</div>
						<div class="row flex-3 border">
							<div class="col" style="width: 100%;height: 335px;">
								<StackedLine />
							</div>
						</div>
						<div class="row line4">
							<div class="flex-1 box border">
								<MultipleBar1 />
							</div>
							<div class="flex-1 box border">
								<MultipleBar2 />
							</div>
							<div class="flex-1 box border">
								<MultipleBar3 />
							</div>
						</div>
					</div>
				</div>
			</el-main>
		</el-container>
	</div>
</template>
<script>
import { defineAsyncComponent } from "vue";
export default {
	components: {
		Curve1: defineAsyncComponent(() => import("../line1/curve1.vue")),
		Curve2: defineAsyncComponent(() => import("../line1/curve2.vue")),
		SingleBar1: defineAsyncComponent(() =>
			import("../line1/singleBar1.vue")
		),
		SingleBar2: defineAsyncComponent(() =>
			import("../line1/singleBar2.vue")
		),
		Condition: defineAsyncComponent(() => import("../line2/condition.vue")),
		Chart6: defineAsyncComponent(() => import("../line3/chart6.vue")),
		StackedLine: defineAsyncComponent(() =>
			import("../line3/stackedLine.vue")
		),
		MultipleBar1: defineAsyncComponent(() =>
			import("../line4/multipleBar1.vue")
		),
		MultipleBar2: defineAsyncComponent(() =>
			import("../line4/multipleBar2.vue")
		),
		MultipleBar3: defineAsyncComponent(() =>
			import("../line4/multipleBar3.vue")
		),
	},
	data() {
		return {
			menu: [{
				name: "BI",
				title: "首页",
				component: "/BI"
			}, {
				name: "Consumables",
				title: "耗材",
				component: "/Consumables"
			}, {
				name: "drug",
				title: "药品",
				component: "/drug"
			}
			]
		};
	},
};
</script>
<style lang="scss" scope>
.hc .box {
	background-color: white !important;
}

.title {
	font-size: 13px;
	font-weight: 600;
}

.content {
	font-size: 10px;
}

.blod {
	font-weight: 600;
}

.row {
	display: flex;
}

.col {
	display: flex;
	flex-direction: column;
}

.flex-1 {
	flex: 1;
}

.flex-2 {
	flex: 2;
}

.flex-3 {
	flex: 3;
}

.line1 {
	height: 155px;
	padding: auto;
	margin-top: 5px;
	margin-bottom: 5px;
}

.border {
	border: 1px solid rgb(228, 228, 228);
	border-radius: 3px;
	margin-top: -5px;
}

.box {
	padding: 5px;
}

.line1>.flex-1 {
	height: 140px;
	margin: 0 5px 0 0;
	border: 1px solid rgb(228, 228, 228);
	border-radius: 3px;
}

.line2>.flex-1 {
	border: 1px solid rgb(228, 228, 228);
	border-radius: 3px;
	margin-top: -15px;
}

.line4 {
	margin-top: 10px;
	justify-content: space-between;
}

.line4>.flex-1 {
	flex: 1;
	margin-right: 10px;
}

.line4>*:nth-last-child(1) {
	flex: 1;
	margin-right: 0;
}
</style>
